<script lang="ts" setup>
import LifeModelItems from "@/components/lifeModel/lifeModelItems/lifeModelItems.vue";
import RecordTimeLog from "@/components/operation/recordTimeLog/recordTimeLog.vue";
import TaskBoardPanel from "@/components/operation/taskBoard/taskBoardPanel.vue";
import TaskLogList from "@/components/operation/taskLogList/taskLogList.vue";
import { SurfaceSetting } from "@model/surfaceSetting";
import UseSurfaceSetting from "@pinias/UseSurfaceSetting";
import pinia from "@pinias/pinia";
import { NSpace } from "naive-ui";
import { ref } from "vue";

// import lifeModelItemsShow from '../lifeModel/lifeModelList/lifeModelItemsShow.vue'
// import taskOperationList from './taskOperation/taskOperationList.vue'
// import TempTaskList from './TempTaskList.vue'
const { getSurfaceSetting } = UseSurfaceSetting(pinia);
const surfaceSetting: SurfaceSetting = getSurfaceSetting();

const value = ref("列表模式");
const songs = [
  {
    value: "列表模式",
    label: "列表模式",
  },
  {
    value: "饼图",
    label: "饼图",
  },
].map(s => {
  s.value = s.value.toLowerCase();
  return s;
});
const timestamp = ref(new Date().getTime());
</script>

<template>
  <n-collapse v-model:expanded-names="surfaceSetting.OperationPanelExpandedNames">
    <record-time-log></record-time-log>
    <task-board-panel :key="surfaceSetting.taskBoardList.key"></task-board-panel>
    <n-collapse-item
      title="生活模板"
      name="2"
    >
      <lifeModelItems
        :key="getSurfaceSetting().LifeModelItemsKey"
        :toRecord="true"
      ></lifeModelItems>
    </n-collapse-item>
    <n-collapse-item
      title="今日记录"
      name="1"
    >
      <n-space>
        <n-date-picker
          v-model:value="timestamp"
          type="date"
        />
        <n-radio-group
          v-model:value="value"
          name="radiobuttongroup1"
        >
          <n-radio
            v-for="song in songs"
            :key="song.value"
            :value="song.value"
            :label="song.label"
          />
        </n-radio-group>
      </n-space>
      <TaskLogList
        :timestamp="timestamp"
        :chooseValue="value"
        :key="timestamp"
      ></TaskLogList>
    </n-collapse-item>
  </n-collapse>
  <div style="height: 10px"></div>
</template>

<style scoped></style>
